<template>
  <view class="container">
    <uni-nav-bar dark :fixed="true" shadow background-color="#007AFF" status-bar  title="我的" />
    <view class="content">
      <view class="my-info" >
        <img src="/static/tx.png" alt="" class="avatar">
        <text class="my-phone" >
          {{ userStore.username }}
        </text>
      </view>

      <!-- <view class="my-info1" >
        <text class="left">
          用户信息
        </text>
          <uni-icons type="right" size="15" style="margin-right: 20rpx;"></uni-icons>
        </view>
      </view> -->
      </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useMemberStore } from '@/stores'
const userStore = useMemberStore()


</script>

<style lang="scss" scoped>
.content {
  background-color: #F5F5F5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .my-info {
    border-radius: 20rpx 20rpx 0 0;
    height: 200rpx;
    width: 100%;
    background-color: white; //f5f5f5
    margin: 20rpx 0rpx;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    align-content: center;
    .avatar {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      margin-top: 20rpx;
      margin-left: 30rpx;
    }
    .my-phone {
      font-size: 30rpx;
      margin-left: 40rpx;
    }


  }
  .my-info1 {
    border-bottom: 1rpx solid rgb(248, 248, 247);
    height: 90rpx;
    width: 100%;
    background-color: white; //f5f5f5
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left{
      padding: 0 30rpx;
      font-size: 25rpx;
    }
    image{
      padding: 0 30rpx;
      width: 26rpx;
      height: 26rpx;
    }
  }

}
</style>
